<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="工单详情" data-page-identification="x_hb0xe6o0k2">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
            <div class="body">
                <template v-if="state.gdDetail?.workOrderDto">
                    <div class="top">
                        <div class="top-left">
                            <div class="title-btn">
                                <div class="title-body">基本信息</div>
                                <div class="btn-body">
                                    <ButtonItem :id="state.detailId" @refresh="getData" />
                                </div>
                            </div>
                            <div class="msg-body">
                                <div class="msg-ttile">
                                    <div class="msg-left">
                                        <div class="title-icon"></div>
                                        <div class="title-name">{{ state.gdDetail.workOrderDto.content }}</div>
                                    </div>
                                    <div class="msg-right">
                                        <div
                                            class="title-proity"
                                            :style="{
                                                backgroundColor: getBgc(state.gdDetail.workOrderDto.priority)
                                            }"
                                            >{{ state.gdDetail.workOrderDto.priority }}</div
                                        >
                                        <div
                                            class="title-status"
                                            :style="getColorStyle(state.gdDetail.workOrderDto.status)"
                                            >{{ state.gdDetail.workOrderDto.status }}</div
                                        >
                                    </div>
                                </div>
                                <div class="second-body">
                                    <div class="second-left">
                                        <span class="label-ft">工单编号：</span>
                                        <span class="content-ft">{{ state.gdDetail.workOrderDto.number }}</span>
                                    </div>
                                    <a-divider style="background-color: #3875ff; height: 20px" type="vertical" />
                                    <div class="second-middle">
                                        <span class="label-ft">计划解决时间：</span>
                                        <span class="content-ft">{{ state.gdDetail.workOrderDto?.endTime }}</span>
                                    </div>
                                    <a-divider style="background-color: #3875ff; height: 20px" type="vertical" />
                                    <div class="second-right">
                                        <span class="label-ft">实际解决时间：</span>
                                        <span class="content-ft">{{ state.gdDetail.workOrderDto?.finishTime }}</span>
                                    </div>
                                </div>
                                <div class="third-body">
                                    <div class="tag-body" v-if="state.gdDetail.workOrderDto.type">{{
                                        state.gdDetail.workOrderDto.type
                                    }}</div>

                                    <div class="tag-body" v-if="state.gdDetail.workOrderDto.monitorSceneName">{{
                                        state.gdDetail.workOrderDto.monitorSceneName
                                    }}</div>
                                    <div class="tag-body" v-if="state.gdDetail.workOrderDto.questionSource">{{
                                        state.gdDetail.workOrderDto.questionSource
                                    }}</div>
                                </div>
                                <div class="fourth-body">
                                    <div class="tag-body" v-if="state.gdDetail.workOrderDto.customer">{{
                                        state.gdDetail.workOrderDto.customer
                                    }}</div>
                                    <div class="tag-body" v-if="state.gdDetail.workOrderDto.areaName">{{
                                        state.gdDetail.workOrderDto.areaName
                                    }}</div>
                                    <div class="tag-body" v-if="state.gdDetail.workOrderDto.production">{{
                                        state.gdDetail.workOrderDto.production
                                    }}</div>
                                    <div class="tag-body" v-if="state.gdDetail.workOrderDto.projectName">{{
                                        state.gdDetail.workOrderDto.projectName
                                    }}</div>
                                    <div class="tag-body" v-if="state.gdDetail.workOrderDto.environment">{{
                                        state.gdDetail.workOrderDto.environment
                                    }}</div>
                                </div>
                            </div>
                            <div class="description-img-body">
                                问题描述
                                <div class="description-img"></div>
                            </div>
                            <div
                                class="description-body richtext-container"
                                v-if="state.detailDescription"
                                v-html="getHtmlContent(state.detailDescription)"
                            >
                            </div>
                            <div class="file-title">附件</div>
                            <div class="file-body">
                                <div class="file-left">
                                    <div
                                        class="file-icon"
                                        v-for="(item, index) in newState.descriptionFileList"
                                        :title="item.name"
                                        @click="handlerDownload(item)"
                                    ></div>
                                </div>
                                <div class="file-right">
                                    <span
                                        v-if="newState.descriptionFileList && newState.descriptionFileList.length > 0"
                                    >
                                        创建时间：{{ state.gdDetail.workOrderDto.createdTime }}</span
                                    >
                                </div>
                            </div>
                        </div>

                        <div class="top-right">
                            <div class="right-top">
                                <div class="title-body mg16">负责人</div>
                                <div class="people-list">
                                    <div class="people-item">
                                        <div class="people-icon"></div>
                                        <span class="people-label">解决人：</span>
                                        <span class="people-content">{{ state.gdDetail.workOrderDto.solver }}</span>
                                    </div>
                                    <div class="people-item">
                                        <div class="people-icon"></div>
                                        <span class="people-label">创建人(owener)：</span>
                                        <span class="people-content">{{ state.gdDetail.workOrderDto.createdBy }}</span>
                                    </div>
                                    <div class="people-item">
                                        <div class="people-icon"></div>
                                        <span class="people-label">PMO：</span>
                                        <span class="people-content">{{ state.gdDetail.workOrderDto.pmo }}</span>
                                    </div>
                                    <div class="people-item">
                                        <div class="people-icon"></div>
                                        <span class="people-label">项目经理：</span>
                                        <span class="people-content">{{ state.gdDetail.workOrderDto.pmName }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="right-bottom">
                                <div class="title-body mg16">沟通记录</div>
                                <div class="communicate-msg">
                                    <div
                                        v-if="
                                            !state.gdDetail.workOrderRemarkDtoList ||
                                            state.gdDetail.workOrderRemarkDtoList.length == 0
                                        "
                                        class="no-img"
                                    >
                                    </div>
                                    <div
                                        v-for="(item, index) in state.gdDetail.workOrderRemarkDtoList"
                                        :key="index"
                                        class="remark-main"
                                    >
                                        <div
                                            :class="[
                                                item.createdBy === userName ? 'remark-body-odd' : 'remark-body-even'
                                            ]"
                                        >
                                            <div class="remark-top">
                                                <div
                                                    class="remark-text richtext-container"
                                                    v-html="getHtmlContent(item.content)"
                                                >
                                                </div>
                                            </div>
                                            <div class="remark-bottom">
                                                <div class="remark-time">{{ item.createdTime }}</div>
                                                <div class="remark-people">{{ item.createdBy }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="communicate-fill">
                                    <div>
                                        <QuillEditor
                                            ref="remarkQuillRef"
                                            :options="editorOptionhidden"
                                            class="quill-editor"
                                    /></div>
                                    <div class="sub-btn" @click="confirmRemark" v-permission="'3000001145_vid_fjukchjwj9'" title="提交沟通记录"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom-main">
                        <a-tabs v-model:activeKey="activeKey">
                            <a-tab-pane key="处理结果" tab="处理结果" />
                            <a-tab-pane key="操作日志" tab="操作日志" force-render />
                        </a-tabs>
                        <div v-if="activeKey === '处理结果'">
                            <div class="title-body mg16">根因分析</div>
                            <div class="root-cause">
                                <div class="root1">
                                    <div class="root1-icon"></div>
                                    <span class="root-label">责任方：</span>
                                    <span class="root-content no-margin">{{ rootState.responsibleParty }}</span>
                                </div>
                                <a-divider type="vertical" style="background-color: #3875ff; height: 16px" />
                                <div class="root2">
                                    <div class="root2-icon"></div>
                                    <span class="root-label">业务类型：</span>
                                    <span class="root-content no-margin">{{ rootState.businessType }}</span>
                                </div>
                                <a-divider type="vertical" style="background-color: #3875ff; height: 16px" />
                                <div class="root3">
                                    <div class="root3-icon"></div>
                                    <span class="root-label">根因分析：</span>
                                    <span class="root-content no-margin">{{ rootState.rootCauseClassify }}</span>
                                </div>
                            </div>
                            <div
                                class="root-content richtext-container"
                                v-html="getHtmlContent(state.gdDetail.workOrderDto.rootCauseAnalysis)"
                            ></div>
                            <div class="title-body mgtp16 mg16">解决方案详情</div>
                            <div class="soltion-body">
                                <div
                                    v-if="state.gdDetail.workOrderDto.solutionDetail"
                                    class="root-content richtext-container"
                                    v-html="getHtmlContent(state.gdDetail.workOrderDto.solutionDetail)"
                                ></div>
                                <!--                            <div class="no-img" v-else>-->
                                <!--                            </div>-->
                            </div>

                            <div class="file-title no-padding">附件</div>
                            <div class="file-body no-padding">
                                <div class="file-left">
                                    <div
                                        class="file-icon"
                                        v-for="(item, index) in newState.solveFileList"
                                        :title="item.name"
                                        @click="handlerDownload(item)"
                                    ></div>
                                </div>
                                <div class="file-right"></div>
                            </div>
                        </div>
                        <div v-else>
                            <div class="change-record">
                                <div class="operation-log" v-for="(item, index) in state.tableData" :key="index">
                                    <div class="opration-title">
                                        <div class="circle">
                                            <div class="inner-line" v-if="index !== state.tableData.length - 1"></div>
                                            <!--                                            <div class="circle-line" v-if="index !== 0"></div>-->
                                            <div class="inner-circle"> </div>
                                        </div>
                                        <div class="title-content">{{ item.month }}</div>
                                    </div>
                                    <div
                                        class="opration-content"
                                        v-for="(son, index) in item.workOrderChangeRecordList"
                                        :key="index"
                                    >
                                        <div class="item-content item-content1">
                                            <div class="content-line"></div>
                                            <div class="opration-title">触发时间：</div>
                                            <div class="opration-msg" :title="son.submissionTime">{{
                                                son.submissionTime
                                            }}</div>
                                        </div>
                                        <div class="item-content item-content2">
                                            <div class="content-line"></div>
                                            <div class="opration-title">操作人：</div>
                                            <div class="opration-msg" :title="son.submitter">{{ son.submitter }}</div>
                                        </div>
                                        <div class="item-content item-content3">
                                            <div class="content-line"></div>
                                            <div class="opration-title">操作内容：</div>
                                            <div class="inner-msg" :title="son.classify">{{ son.classify }}</div>
                                        </div>
                                        <div
                                            class="item-content item-content4"
                                            v-if="son.classify.includes('关闭') || son.classify.includes('无需解决')"
                                        >
                                            <!--                                            <div class="content-line"></div>-->
                                            <div class="opration-title">备注：</div>
                                            <a-tooltip
                                                :overlay-style="{
                                                    maxWidth: '200px'
                                                }"
                                            >
                                                <template #title>{{ son.remark }}</template>
                                                <div class="inner-msg">{{ son.remark }}</div>
                                            </a-tooltip>
                                        </div>
                                        <!--                                        <div class="item-content item-content5">-->
                                        <!--                                            <div class="content-line"></div>-->
                                        <!--                                            <div class="opration-title">工单编号：</div>-->
                                        <!--                                            <div class="inner-msg" :title="son.workOrderNumber">{{-->
                                        <!--                                                son.workOrderNumber-->
                                        <!--                                            }}</div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="item-content item-content4">-->
                                        <!--                                            <div class="opration-title">工单标题：</div>-->
                                        <!--                                            <div class="opration-msg" :title="son.content">{{ son.content }}</div>-->
                                        <!--                                        </div>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <!-- end vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'

    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'

    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'message': {
            type: [String],
            default: ''
        },
        'projectId': {
            type: [String, Number],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
        'abc': undefined,
        'def': undefined
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)

    const pageParams = [
        { 'name': 'abc', 'dataType': 'STRING' },
        { 'name': 'def', 'dataType': 'STRING' }
    ]
    let setPageParams = () => {
        pageParams.forEach(param => {
            strategyMap[param.dataType](param, route.query[param.name])
        })
    }
    const strategyMap = {
        STRING: (param, paramValue) => {
            if (typeof paramValue === 'undefined') {
                pageParameter_state[param.name] = undefined
                return
            }
            pageParameter_state[param.name] = paramValue
        },
        BOOLEAN: (param, paramValue) => {
            if (typeof paramValue === 'undefined') {
                pageParameter_state[param.name] = undefined
                return
            }
            if ('true' === (paramValue || '').toLowerCase()) {
                pageParameter_state[param.name] = true
            } else if ('false' === (paramValue || '').toLowerCase()) {
                pageParameter_state[param.name] = false
            } else {
                message.error('参数传入错误！类型不匹配！')
            }
        },
        NUMBER: (param, paramValue) => {
            if (typeof paramValue === 'undefined') {
                pageParameter_state[param.name] = undefined
                return
            }
            if (!isNaN(paramValue)) {
                pageParameter_state[param.name] = Number(paramValue)
            } else {
                message.error('参数传入错误！类型不匹配！')
            }
        },
        ARRAY: (param, paramValue) => {
            if (typeof paramValue === 'undefined') {
                pageParameter_state[param.name] = undefined
                return
            }
            if (isNullOrUnDef(paramValue) || !paramValue || paramValue === 'undefined') {
                pageParameter_state[param.name] = []
            } else if (paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
                try {
                    pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue))
                } catch (error) {
                    console.error('参数解析失败 ', error)
                    message.error('参数解析失败 ', error)
                }
            } else {
                console.error('参数传入错误！类型不匹配！')
                message.error('参数传入错误！类型不匹配！')
            }
        }
    }
    /*** PUBLISH_EXEGESIS ***
 immediateWatch(
 () => route.query,
 () => {
 setPageParams();
 queryUpdateFlag.value++;

 }
 )
 *** PUBLISH_EXEGESIS ***/
    onMounted(() => {
        setPageParams()
    })

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    import { nextTick } from 'vue'
    const userInfo = localStorage.getItem('al__USER_INFO')
    const userName = JSON.parse(userInfo).value.name
    //     富文本设置
    onMounted(() => {
        console.log(userName, 'name')
        const urlParams = new URLSearchParams(window.location.search)
        // 获取单个参数
        state.detailId = Number(urlParams.get('id'))
        state.modalForm.parentId = state.detailId
        getData()
        getAllUser()
        document.addEventListener('click', e => {
            const target = e.target as HTMLElement
            if (target.tagName === 'IMG' && target.classList.contains('previewable-image')) {
                const imgUrl = target.getAttribute('src')
                if (imgUrl) {
                    // 预览逻辑，如弹窗显示 imgUrl
                    previewImage(imgUrl)
                }
            }
        })
        // nextTick(() => {
        //     let body = document.body
        //     console.log(body.offsetWidth)
        //     console.log(screen.width)
        //     body.style.width=screen.width
        //     body.style.height=screen.height
        //     let num = document.body.offsetWidth / body.offsetWidth
        //     document.body.style.scale = num
        // })
    })
    // window.onresize = () => {
    //     let body = document.body
    //     console.log(body.offsetWidth)
    //     console.log(screen.width)
    //     body.style.width=screen.width
    //     body.style.height=screen.height
    //     let num = document.body.offsetWidth / body.offsetWidth
    //     document.body.style.scale = num
    // }
    function previewImage(url) {
        const imgWindow = window.open()
        if (imgWindow) {
            imgWindow.document.write(`<img src="${url}" style="max-width:100%"/>`)
        }
    }

    const quillMsgRef = ref(null)
    import { QuillEditor, Quill } from '@vueup/vue-quill'
    import ImageUploader from 'quill-image-uploader'
    import '@vueup/vue-quill/dist/vue-quill.snow.css'
    const titleConfig = [
        { Choice: ' .ql-bold', title: '加粗' },
        { Choice: ' .ql-italic', title: '斜体' },
        { Choice: ' .ql-underline', title: '下划线' },
        { Choice: ' .ql-strike', title: '删除线' },
        { Choice: ' .ql-blockquote', title: '块引用' },
        { Choice: ' .ql-code-block', title: '插入代码' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-color', title: '字体颜色' },
        // { Choice: ' .ql-background', title: '字体背景颜色' },
        // { Choice: ' .ql-list[value="ordered"]', title: '有序列表' },
        // { Choice: ' .ql-list[value="bullet"]', title: '无序列表' },
        { Choice: ' .ql-header[value="1"]', title: '1级标题' },
        { Choice: ' .ql-header[value="2"]', title: '2级标题' },
        { Choice: ' .ql-align', title: '对齐方式' },
        // { Choice: ' .ql-clean', title: '清除字体格式' },
        { Choice: ' .ql-image', title: '图像' },
        { Choice: ' .ql-size .ql-picker-item[data-value="small"]', title: '小号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="large"]', title: '大号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
        { Choice: ' .ql-size .ql-picker-item:nth-child(2)', title: '标准' },
        { Choice: ' .ql-align .ql-picker-item:first-child', title: '居左对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
    ]
    // 注册图片上传模块
    Quill.register('modules/imageUploader', ImageUploader)

    // 上传API
    const uploadFileAPI = async file => {
        const data = new FormData()
        data.append('file', file)

        return post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                return { data: { fullUrl } }
            })
            .catch(error => {
                console.error('上传图片出错:', error)
                throw error // 抛出错误以供外部处理
            })
    }

    // 将本地文件转换为URL
    const getLocalImageURL = file => {
        return new Promise(resolve => {
            const reader = new FileReader()
            reader.onload = e => {
                resolve(e.target.result)
            }
            reader.readAsDataURL(file)
        })
    }

    // Quill 编辑器选项
    const editorOption = ref({
        modules: {
            // imageUploader: {
            //     upload: async file => {
            //         const localUrl = await getLocalImageURL(file)
            //         return localUrl // 返回本地图片的 URL 进行预览
            //     }
            // },
            toolbar: [
                // [{ font: Font.whitelist }], // 字体
                ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                ['blockquote', 'code-block'], // 引用，代码块
                // [{ header: 1 }, { header: 2 }], // 标题1，标题2
                // [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
                // [{ script: 'sub' }, { script: 'super' }], // 上标，下标
                // [{ indent: '-1' }, { indent: '+1' }], // 缩进
                // [{ direction: 'rtl' }], // 文字方向
                [{ size: ['small', false, 'large', 'huge'] }], // 文字大小
                // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题大小
                [{ color: [] }, { background: [] }], // 字体颜色，背景颜色
                [{ align: [] }], // 对齐
                ['clean'], // 清除格式
                ['image'] // 链接，图片，视频
            ]
        }
    })
    const editorOptionhidden = ref({
        modules: {
            // imageUploader: {
            //     upload: async file => {
            //         const localUrl = await getLocalImageURL(file)
            //         return localUrl // 返回本地图片的 URL 进行预览
            //     }
            // },
            toolbar: [
                ['image'] // 链接，图片，视频
            ]
        }
    })
    const quillEditor = ref(null) // 引用QuillEditor组件
    const sonRef = ref(null)
    // 提交表单的方法

    // 将 dataURL 转换为 File 对象的辅助函数
    const dataURLtoFile = (dataurl, filename) => {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, { type: mime })
    }
    const currentData = ref({})
    function initTitle() {
        // document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
        for (let item of titleConfig) {
            console.log(titleConfig, 'titleConfig')
            let tip = document.querySelector('.ql-toolbar' + item.Choice)
            if (!tip) continue
            tip.setAttribute('title', item.title)
        }
    }
    //     富文本设置
    const state = reactive({
        detailId: undefined,
        dataList: [],
        fileVisible: false,
        fileDetailVisible: false,
        addRemarkVisible: false,
        backRemarkVisible: false,
        remarkTitle: '',
        remarkMsg: '',
        remarkVisible: false,
        remarkList: [],
        changeStatusVisible: false,
        modalForm: {
            parentId: undefined,
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            milepostId: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            descriptionAttachmentList: [],
            quillData: ''
        },
        tableData: [],
        allUser: [],
        editSonVisible: false,
        modalTitle: '',
        gdDetail: {},
        changeStatusForm: {
            status: undefined,
            reason: '',
            attachmentList: [],
            workOrderId: undefined,
            solution: undefined
        },
        sonLoading: false,
        remarkLoading: false,
        detailDescription: {},
        changeStausList: [
            {
                label: '正在处理',
                value: '正在处理'
            },
            {
                label: '已解决',
                value: '已解决'
            },
            {
                label: '无需解决',
                value: '无需解决'
            },
            {
                label: '申请流转',
                value: '申请流转'
            }
        ],
        deleteVisible: false,
        detailVisible: false,
        detailTitle: '',
        //   是否是回复父亲备注
        previewImage: '',
        previewVisible: false
    })
    const columns = [
        {
            title: '变更模块',
            dataIndex: 'classify',
            align: 'center',
            ellipsis: true
        },
        {
            title: '工单标题',
            dataIndex: 'content',
            align: 'center',
            ellipsis: true
        },
        {
            title: '变更属性',
            dataIndex: 'changeFieldName',
            align: 'center',
            ellipsis: true
        },
        {
            title: '变更前',
            dataIndex: 'beforeChange',
            align: 'center',
            ellipsis: true
        },
        {
            title: '变更后',
            dataIndex: 'afterChange',
            align: 'center',
            ellipsis: true
        },
        {
            title: '验证状态',
            dataIndex: 'approveStatus',
            align: 'center',
            width: 100,
            ellipsis: true
        },
        {
            title: '审批人',
            dataIndex: 'approveUser',
            align: 'center',
            width: 120,
            ellipsis: true
        },
        {
            title: '提交人',
            dataIndex: 'submitter',
            align: 'center',
            width: 120,
            ellipsis: true
        },
        {
            title: '提交时间',
            dataIndex: 'submissionTime',
            align: 'center',
            width: 180,
            ellipsis: true
        }
    ]
    // 跳子详情
    function handleSonDetail(id) {
        // router.push(
        //     `${import.meta.env.VITE_PUBLIC_PATH}/page/3000000787?id=${id}&url=3000000785&lastId=${state.detailId}`
        // )
        window.open(
            `${import.meta.env.VITE_PUBLIC_PATH}/page/3000000787?id=${id}&url=3000000785&lastId=${state.detailId}`,
            '_blank'
        )
    }
    const rootDetailMsg = ref()
    function getData() {
        pageLoading.loading = true
        get(`/solution-ppm-work-order/api/v1/work_order/details/${state.detailId}`)
            .then(async data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }

                state.gdDetail = data.data
                rootState.rootCauseFlag = data.data.workOrderDto.rootCauseFlag
                try {
                    state.detailDescription = data.data.workOrderDto.description
                } catch (e) {
                    console.warn('description 解析失败', e)
                }

                try {
                    const solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
                    const rootDetail = JSON.parse(data.data.workOrderDto.rootCauseAnalysis)

                    // 即使第一个报错也不影响第二个执行
                    try {
                        solutionQuillEditor.value.setContents(solutionDetail)
                    } catch (e) {
                        console.warn('设置 solutionQuillEditor 报错:', e)
                    }

                    try {
                        rootQuillEditor.value.setContents(rootDetail)
                        rootDetailMsg.value = data.data.workOrderDto.rootCauseAnalysis
                    } catch (e) {
                        console.warn('设置 rootQuillEditor 报错:', e)
                    }
                } catch (e) {
                    console.warn('solutionDetail 解析失败', e)
                }
                newState.solution = data.data.workOrderDto.solution
                state.tableData = data.data.workOrderOperateLogList
                newState.descriptionFileList = data.data.workOrderDto.descriptionAttachmentList
                newState.solveFileList = data.data.workOrderDto.attachmentList
                rootState.rootCauseClassify = data.data.workOrderDto.rootCauseClassify || undefined
                rootState.responsibleParty = data.data.workOrderDto.responsibleParty || undefined
                rootState.businessType = data.data.workOrderDto.businessType || undefined
            })
            .finally(() => {
                pageLoading.loading = false
            })
    }

    const taskPeopleList = ref([])
    function handlerAddPeople(name) {
        if (state.modalForm.solverList.indexOf(name) !== -1) {
            state.modalForm.solverList = state.modalForm.solverList.filter(item => item !== name)
        } else {
            state.modalForm.solverList[0] = name
        }
    }
    function getAllUser() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.allUser = data.data.userDtoList
        })
    }

    function resetFather() {
        state.modalForm = {
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            milepostId: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            descriptionAttachmentList: []
        }
    }
    function resetGdQuill() {
        quillEditor.value.setContents({})
    }
    //     查看附件
    function showFile(record) {
        resetCurrentData()
        currentData.value = record
        state.fileVisible = true
    }
    // 父上传文件
    function handlerFatherUpload(file) {
        state.sonLoading = true
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    // 新文件对象
                    const newFile = {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }

                    // 去重，保留一个副本
                    state.modalForm.descriptionAttachmentList = [
                        // 保留已存在文件（去除重复）
                        ...state.modalForm.descriptionAttachmentList.filter(
                            item => item.uid !== file.uid && item.name !== file.name
                        ),
                        // 添加新的文件
                        newFile
                    ]
                }
                state.sonLoading = false
            })
            .catch(e => {
                message.error('上传失败' + e)
            })

        return false
    }
    // 父移除文件
    function handlerFatherRemove(file) {
        state.modalForm.descriptionAttachmentList = state.modalForm.descriptionAttachmentList.filter(
            item => item.uid !== file.uid
        )
    }
    // 父上传文件
    function resetCurrentData() {
        currentData.value = {}
        currentRemark.value = {}
    }
    const changeRef = ref(null)

    function resetSonForm() {
        state.editSonVisible = false
        state.modalForm = {
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            milepostId: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            descriptionAttachmentList: []
        }
    }
    function resetChangeForm() {
        state.changeStatusForm = {
            status: undefined,
            reason: '',
            attachmentList: [],
            workOrderId: undefined,
            solution: undefined
        }
    }
    function statusChange() {
        state.changeStatusForm.attachmentList = []
        state.changeStatusForm.reason = undefined
        state.changeStatusForm.solution = undefined
    }
    //     子工单编辑
    function handleEdit(record) {
        state.modalTitle = '编辑子工单'
        resetCurrentData()
        currentData.value = record
        state.editSonVisible = true
        Object.assign(state.modalForm, record)
        nextTick(() => {
            get(`/solution-ppm-work-order/api/v1/work_order/details/${record.id}`).then(data => {
                let descriptionData = JSON.parse(data.data.workOrderDto.description)
                quillEditor.value.setContents(descriptionData)
                state.modalForm.description = descriptionData
            })
        })
    }
    function handleAddRemark() {
        if (state.gdDetail.workOrderDto.status === '已关闭' || state.gdDetail.workOrderDto.status === '已回访') {
            message.info('请将父工单状态变更为解决中后重试')
            return
        }
        resetCurrentData()
        state.addRemarkVisible = true
        state.remarkTitle = '新建备注'
        nextTick(() => {
            remarkQuillRef.value.setContents('')
        })
    }
    const remarkQuillRef = ref(null)
    async function confirmRemark() {
        state.remarkLoading = true
        const deltaContent = remarkQuillRef.value.getContents()
        const htmlContent = remarkQuillRef.value.getHTML() // 获取 HTML 内容
        const imageUploadPromises = []

        deltaContent.ops.forEach(op => {
            if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                const localSrc = op.insert.image

                // 如果是 base64 图片，上传并替换为 URL
                const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                    // 替换 op 中的 base64 URL 为服务器返回的 URL
                    op.insert.image = fullUrl
                })

                imageUploadPromises.push(uploadPromise)
            }
        })

        try {
            await Promise.all(imageUploadPromises)

            if (currentRemark.value.id) {
                const params = {
                    id: currentRemark.value.id,
                    content: JSON.stringify(deltaContent),
                    'parentId': currentRemark.value.parentId
                }
                put('/solution-ppm-work-order/api/v1/work_order/remark', params)
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        state.addRemarkVisible = false
                        getData()
                    })
                    .finally(() => {
                        state.remarkLoading = false
                    })
            } else {
                const params = {
                    'workOrderId': state.detailId,
                    'content': JSON.stringify(deltaContent)
                }
                post('/solution-ppm-work-order/api/v1/work_order/remark', params)
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        state.addRemarkVisible = false
                        getData()
                        nextTick(() => {
                            remarkQuillRef.value.setContents('')
                        })
                    })
                    .finally(() => {
                        state.remarkLoading = false
                    })
            }
        } catch (error) {
            state.remarkLoading = false
            console.error('图片上传失败', error)
            return // 终止提交
        }
    }
    // function getHtmlContent(delta) {
    //     const quill = new Quill(document.createElement('div'))
    //     quill.setContents(JSON.parse(delta))
    //     return quill.root.innerHTML
    // }

    // function getHtmlContent(input) {
    //     console.log(input)
    //     // 防御性处理：避免 null 或 undefined
    //     if (!input) return ''
    //
    //     // 尝试解析为富文本 Delta 格式
    //     let deltaObj = null
    //     try {
    //         const parsed = typeof input === 'string' ? JSON.parse(input) : input
    //         if (parsed?.ops && Array.isArray(parsed.ops)) {
    //             deltaObj = parsed
    //         }
    //     } catch (e) {
    //         // 解析失败，说明不是 JSON 或不是 Delta 格式，走普通字符串逻辑
    //     }
    //
    //     // 如果是富文本格式
    //     if (deltaObj) {
    //         try {
    //             const tempEl = document.createElement('div')
    //             const quill = new Quill(tempEl)
    //             quill.setContents(deltaObj)
    //             return quill.root.innerHTML
    //         } catch (err) {
    //             console.error('富文本渲染失败', err)
    //             return '' // 保险起见返回空
    //         }
    //     }
    //
    //     // 否则是普通文本，做一下换行处理
    //     return String(input).replace(/\n/g, '<br/>')
    // }

    // function getHtmlContent(input) {
    //     if (!input) return ''
    //
    //     let deltaObj = null
    //     try {
    //         const parsed = typeof input === 'string' ? JSON.parse(input) : input
    //         if (parsed?.ops && Array.isArray(parsed.ops)) {
    //             deltaObj = parsed
    //         }
    //     } catch (e) {}
    //
    //     if (deltaObj) {
    //         try {
    //             const converter = new QuillDeltaToHtmlConverter(deltaObj.ops, {
    //                 inlineStyles: false
    //             })
    //             return converter.convert()
    //         } catch (err) {
    //             console.error('富文本转HTML失败', err)
    //             return ''
    //         }
    //     }
    //
    //     return String(input).replace(/\n/g, '<br/>')
    // }
    import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'
    function getHtmlContent(input) {
        if (!input) return ''
        let deltaObj = null
        try {
            const parsed = typeof input === 'string' ? JSON.parse(input) : input
            if (parsed?.ops && Array.isArray(parsed.ops)) {
                deltaObj = parsed
            }
        } catch (e) {}

        if (deltaObj) {
            try {
                const converter = new QuillDeltaToHtmlConverter(deltaObj.ops, {
                    inlineStyles: false
                })
                let html = converter.convert()

                // 替换图片
                html = html.replace(/<img[^>]*src="([^"]+)"[^>]*>/g, (match, src) => {
                    return `<img src="${src}" class="previewable-image" title="点击查看图片"/>`
                })

                // 加一个外层 div 强制所有文字靠左
                return `<div style="text-align: left;">${html}</div>`
            } catch (err) {
                console.error('富文本转HTML失败', err)
                return ''
            }
        }

        // 非 Delta 数据，手动加 <div> 包裹
        return `<div style="text-align: left;">${String(input).replace(/\n/g, '<br/>')}</div>`
    }

    const currentRemark = ref({})
    const backRemarkQuillRef = ref(null)
    function resetBack() {
        currentRemark.value = {}
    }
    function feedBackRemark(record) {
        resetBack()
        currentRemark.value = record
        state.backRemarkVisible = true
        nextTick(() => {
            backRemarkQuillRef.value.setContents('')
        })
    }
    // 确认回复
    async function confirmBackRemark() {
        state.remarkLoading = true
        const deltaContent = backRemarkQuillRef.value.getContents()
        const imageUploadPromises = []

        deltaContent.ops.forEach(op => {
            if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                const localSrc = op.insert.image

                // 如果是 base64 图片，上传并替换为 URL
                const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                    // 替换 op 中的 base64 URL 为服务器返回的 URL
                    op.insert.image = fullUrl
                })

                imageUploadPromises.push(uploadPromise)
            }
        })

        try {
            await Promise.all(imageUploadPromises)
            const params = {
                workOrderId: state.detailId,
                content: JSON.stringify(backRemarkQuillRef.value.getContents()),
                parentId: currentRemark.value.id
            }
            post('/solution-ppm-work-order/api/v1/work_order/remark/feedback', params)
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    state.backRemarkVisible = false
                    getData()
                })
                .finally(() => {
                    state.remarkLoading = false
                })
        } catch (error) {
            state.remarkLoading = false
            console.error('图片上传失败', error)
            return // 终止提交
        }
    }
    //     编辑备注
    function editRemark(record) {
        resetBack()
        currentRemark.value = record
        state.remarkTitle = '编辑备注'
        state.addRemarkVisible = true
        nextTick(() => {
            let descriptionData = JSON.parse(record.content)
            remarkQuillRef.value.setContents(descriptionData)
        })
    }
    function handlerDeleteRemark(record) {
        del(`/solution-ppm-work-order/api/v1/work_order/remark/${record.id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }
    function handlerDeleteFeedBack(record) {
        del(`/solution-ppm-work-order/api/v1/work_order/remark/feedback/${record.id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }
    function handleDelete() {
        deleteRef.value.validate().then(() => {
            state.deleteLoading = true
            del(`/solution-ppm-work-order/api/v1/work_order/${currentData.value.id}`)
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    state.deleteVisible = false
                    getData()
                })
                .finally(() => {
                    state.deleteLoading = false
                })
        })
    }
    function handlerDownload(item) {
        pageLoading.loading = true
        pageLoading.tip = '文件下载中...'
        fetch(item.url)
            .then(response => response.blob())
            .then(blob => {
                const downloadLink = document.createElement('a')
                const url = URL.createObjectURL(blob)
                downloadLink.href = url
                downloadLink.setAttribute('download', item.name)
                downloadLink.style.display = 'none'
                document.body.appendChild(downloadLink)
                downloadLink.click()
                document.body.removeChild(downloadLink)

                // Release the object URL after the download
                URL.revokeObjectURL(url)
                pageLoading.loading = false
            })
            .catch(err => {
                console.error('Download failed', err)
            })
    }

    function toDelete(record) {
        resetCurrentData()
        currentData.value = record
        state.deleteVisible = true
    }
    //     预览图片
    function previewAttachment(item) {
        // 检查附件类型
        if (item.type.startsWith('image')) {
            state.previewImage = item.url // 设置预览图片的URL
            state.previewVisible = true // 显示模态框
        } else {
            // state.isImagePreview = false;
            // // 如果是其他类型的文件，直接在模态框中显示
            // state.previewFileUrl = item.url; // 设置预览文件的URL
            message.info('目前仅支持图片预览')
        }
    }
    function handlepreviewCancel() {
        state.previewVisible = false
    }
    //     新需求
    const newState = reactive({
        descriptionFileList: [],
        solveFileList: [],
        //   解决方案概述
        solution: '',
        changeStatusLoading: false,
        isExpandAll: false,
        circulationVisible: false,
        resolvingVisible: false,
        resolvedVisible: false,
        circulationForm: {
            solverList: [],
            status: '未开始'
        },
        resolvingForm: {
            solution: '',
            status: '解决中',
            solutionDetail: ''
        },
        resolvedForm: {
            solution: '',
            attachmentList: [],
            status: '已解决',
            solutionDetail: ''
        },
        closeForm: {
            status: '关闭'
        },
        workOrderId: undefined,
        saveLoading: false
    })
    const solutionQuillEditor = ref(null)

    //     根因分析
    const rootState = reactive({
        // 责任方
        responsibleParty: undefined,
        responsiblePartyList: [],
        // 业务类型
        businessType: undefined,
        businessTypeList: [],
        rootCauseClassifyList: undefined,
        rootCauseClassify: [],
        // 根因分析
        belongList: [],
        tagList: [],
        rootCauseFlag: false,
        tipVisible: false
    })
    const rootQuillEditor = ref(null)
    // 获取责任方

    // 保存切换前值
    import ButtonItem from './Page3000001113.vue'
    // import ButtonItem from './Page3000001042.vue'
    const colorMap = {
        '未开始': { color: '#fff', backgroundColor: '#A9A9A9 !important' },
        '已解决': { color: '#fff', backgroundColor: '#52C41A !important' },
        '解决中': { color: '#fff', backgroundColor: '#3875ff  !important' },
        '无需解决': { color: '#fff', backgroundColor: '#FFC900  !important' },
        '已关闭': { color: '#fff', backgroundColor: '#262626 !important' },
        '已回访': { color: '#fff', backgroundColor: '#9254DE !important' },
        '待分发': { color: '#fff', backgroundColor: '#FF7D27 !important' }
    }
    function getColorStyle(status) {
        return colorMap[status] || '#262626'
    }
    const proityColor = {
        'P0': '#ff2a00',
        'P1': '#ffa940',
        'P2': '#ffa940',
        'P3': '#1890ff',
        'p0': '#ff2a00',
        'p1': '#ffa940',
        'p2': '#ffa940',
        'p3': '#1890ff'
    }
    function getBgc(type) {
        console.log(type)
        return proityColor[type]
    }
    const activeKey = ref('处理结果')
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }

    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }

    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }

    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }

    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }

    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }

    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }

    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .top {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        //height: 550px;
    }
    .top-left {
        padding: 24px;
        width: 60%;
        background-color: #fff;
        border-radius: 4px;
    }
    .top-right {
        flex: 1;
    }
    .title-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 17px;
    }
    .title-body {
        height: 16px;
        padding-left: 8px;
        line-height: 16px;
        border-left: 4px solid #3875ff;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }
    .msg-body {
        background-image: linear-gradient(180deg, rgba(56, 117, 255, 0.1) 0%, rgba(56, 117, 255, 0.01) 100%);
        border-radius: 4px;
        padding: 13px 16px;
        margin-bottom: 16px;
    }
    .msg-ttile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 13px;
    }
    .msg-left,
    .msg-right {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .title-icon {
        width: 24px;
        height: 24px;
        background-image: url('http://10.40.0.33:9001/file-storage/517982505704697856-source.png');
        background-size: cover;
    }
    .title-name {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .title-proity {
        width: 40px;
        height: 22px;
        color: #fff;
        text-align: center;
        line-height: 22px;
        font-weight: 600;
        border-radius: 2px;
    }
    .title-status {
        min-width: 58px;
        padding: 3px 8px;
        height: 22px;
        line-height: 16px;
        text-align: center;
        border-radius: 2px;
    }
    .second-body {
        display: flex;
        gap: 16px;
        align-items: center;
        line-height: 16px;
        margin-bottom: 13px;
        flex-wrap: wrap;
    }
    .label-ft {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .content-ft {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .third-body,
    .fourth-body {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }
    .fourth-body {
        margin-bottom: 0;
        flex-wrap: wrap;
    }
    .tag-body {
        padding: 4px 8px;
        border: 1px solid rgba(89, 89, 89, 0.35);
        border-radius: 2px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        text-align: center;
        line-height: 22px;
        font-weight: 400;
    }
    .description-body {
        height: 200px;
        overflow-y: auto;
        margin-bottom: 12px;
    }
    .description-img-body {
        position: relative;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: 12px;
        padding-left: 4px;
    }
    .description-img {
        position: absolute;
        width: 64px;
        height: 8px;
        left: 0;
        bottom: 0;
        background-image: url('http://10.40.0.33:9001/file-storage/517986359682871296-source.png');
        background-size: cover;
    }
    .file-title {
        font-size: 14px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 500;
        margin-bottom: 8px;
    }
    .file-body {
        display: flex;
        justify-content: space-between;
    }
    .file-left {
        display: flex;
        gap: 10px;
    }
    .file-icon {
        width: 16px;
        height: 16px;
        background-image: url('http://10.40.0.33:9001/file-storage/517987555793514496-source.png');
        background-size: cover;
        cursor: pointer;
    }
    .right-top {
        padding: 20px 24px;
        background-color: #fff;
        border-radius: 4px;
        //height: 100px;
    }
    .people-item {
        display: flex;
        align-items: center;
    }
    .people-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .people-icon {
        width: 18px;
        height: 18px;
        background-image: url('http://10.40.0.33:9001/file-storage/518744289902407680-source.png');
        background-size: cover;
        margin-right: 4px;
    }
    .right-bottom {
        background: #ffffff;
        border-radius: 4px;
        margin-top: 24px;
        padding: 20px 24px;
    }
    .communicate-msg {
        height: 282px;
        overflow-y: auto;
        margin-bottom: 16px;
        padding-right: 6px;
        position: relative;
    }

    .sub-btn {
        background-image: url('http://10.40.0.33:9001/file-storage/518746950211022848-source.png');
        background-size: cover;
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 8px;
        right: 48px;
        cursor: pointer;
    }
    .communicate-fill {
        border-radius: 4px;
        padding: 0 5px;
        position: relative;
    }
    .communicate-fill :deep(.ql-editor) {
        padding: 5px;
        height: 60px;
    }
    .communicate-fill :deep(.ql-toolbar) {
        //display: none;
        border: none;
        height: 0;
        padding: 0 !important;
    }
    .communicate-fill :deep(.ql-toolbar .ql-image) {
        display: block;
        height: 28px;
        z-index: 900;
        position: absolute;
        bottom: 2px;
        right: 14px;
    }

    .communicate-fill :deep(.ql-blank) {
        border-top: 1px solid #3875ff;
        border-radius: 4px;
    }
    .communicate-fill :deep(.ql-toolbar) {
        padding: 5px;
        border-radius: 4px;
        border-color: #3875ff;
    }
    .communicate-fill :deep(.ql-container) {
        height: 80px;
        border-color: #3875ff;
        border-radius: 4px;
    }
    .communicate-fill :deep(.ql-editor) {
        border-top: 1px solid #3875ff;
        border-radius: 4px;
    }
    //.communicate-fill div:first-child {
    //    width: 95%;
    //}
    .remark-body {
        text-align: right;
    }
    .remark-body-odd {
        margin-bottom: 16px;
        text-align: right;
        .remark-bottom {
            display: flex;
            gap: 8px;
            justify-content: end;
        }
        .remark-top {
            background: rgba(56, 117, 255, 0.15);
            margin-bottom: 8px;
        }
    }
    .remark-body-even {
        margin-bottom: 16px;
        text-align: left;
        .remark-bottom {
            display: flex;
            gap: 8px;
            justify-content: start;
        }
        .remark-top {
            background: rgba(56, 172, 255, 0.15);
            margin-bottom: 8px;
        }
    }
    .remark-top {
        border-radius: 4px 0 4px 4px;
        padding: 8px 16px;
        display: inline-block;
    }
    .remark-time {
        font-size: 12px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .remark-people {
        font-size: 12px;
        color: #3875ff;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .people-label {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .people-content {
        font-size: 14px;
        letter-spacing: 0;
        font-weight: 500;
    }
    .page_root {
        height: 100%;
        overflow-x: auto !important;
    }
    .body {
        height: 100%;
        overflow: auto;
        min-width: 1222px;
    }
    .bottom-main {
        padding: 0 24px 24px 24px;
        background: #ffffff;
        border-radius: 4px;
        margin-top: 24px;
    }
    .root-cause {
        height: 46px;
        background-image: linear-gradient(180deg, rgba(56, 117, 255, 0.1) 0%, rgba(56, 117, 255, 0.01) 100%);
        border-radius: 4px;
        display: flex;
        gap: 24px;
        align-items: center;
        padding: 12px 16px;
        margin-bottom: 16px;
    }
    .root-label {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .root-content {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        margin-bottom: 16px;
        min-height: 20px;
    }
    .no-margin {
        margin-bottom: 0;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .root1,
    .root2,
    .root3 {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .root1-icon,
    .root2-icon,
    .root3-icon {
        height: 16px;
        width: 16px;
        background-size: cover;
    }
    .root1-icon {
        background-image: url('http://10.40.0.33:9001/file-storage/518752688759189504-source.png');
    }
    .root2-icon {
        background-image: url('http://10.40.0.33:9001/file-storage/518752738031775744-source.png');
    }
    .root2-icon {
        background-image: url('http://10.40.0.33:9001/file-storage/518752768824258560-source.png');
    }
    .no-padding {
        padding-left: 0;
    }
    .change-record {
        background-color: #fff;
        padding: 21px 0;
        border-radius: 4px;
        padding-top: 0;
    }
    .information-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        .title {
            display: flex;
            height: 22px;
            font-size: 16px;
            line-height: 22px;
            color: #262626;
            letter-spacing: 0;
            font-weight: 600;
            align-items: center;
            gap: 8px;
        }
        .title-icon {
            height: 16px;
            width: 4px;
            background-color: #3875ff;
        }
    }
    .operation-log {
        margin-top: 16px;
        //border-left: 1px dashed #d9d9d9;
        padding-left: 24px;
        position: relative;
        margin-bottom: 32px;
    }
    .operation-log:last-child {
        border-left: none;
    }
    .opration-title {
        height: 50%;
    }
    .opration-msg {
        flex: 1;
        color: #262626;
        font-weight: 600;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .item-content {
        flex: 1;
        padding: 16px 24px;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .content-line {
        position: absolute;
        right: 0;
        height: 48px;
        width: 1px;
        background-image: linear-gradient(180deg, rgba(56, 117, 255, 0) 0%, #3875ff 50%, rgba(56, 117, 255, 0) 100%);
    }
    .item-content1 {
        flex: 0 0 15%; /* 最小宽度 */
    }

    .item-content2 {
        flex: 0 0 10%; /* 最大宽度 */
    }
    .item-content3 {
        flex: 0 0 15%; /* 最大宽度 */
    }
    .item-content4 {
        flex: 0 0 50%; /* 最大宽度 */
    }
    //.item-content4 {
    //    max-width: 30%;
    //}
    //.item-content5 {
    //    max-width: 15%;
    //}
    .opration-content {
        background-image: linear-gradient(92deg, rgba(56, 117, 255, 0.2) 0%, rgba(56, 117, 255, 0.07) 98%);
        border-radius: 4px;
        height: 80px;
        display: flex;
        margin-bottom: 16px;
    }
    .circle {
        position: absolute;
        left: -8px;
        top: -4px;
        width: 16px; /* 设置圆环的宽度 */
        height: 16px; /* 设置圆环的高度 */
        border: 3px solid #3875ff; /* 设置圆环的边框，宽度为8px，颜色为#3875ff */
        border-radius: 50%; /* 将元素设置为圆形 */
    }
    .inner-line {
        position: absolute;
        height: 105px;
        bottom: -115px;
        left: 5px;
        border-left: 1px dashed #d9d9d9;
        width: 1px;
    }
    .inner-line:last-child {
    }
    .inner-circle {
        width: 8px; /* 设置中间空白的宽度 */
        height: 8px; /* 设置中间空白的高度 */
        background-color: white; /* 设置中间空白的背景色为白色 */
        border-radius: 50%; /* 将元素设置为圆形 */
        position: absolute; /* 绝对定位，使其位于圆环中间 */
        top: 50%; /* 垂直居中 */
        left: 50%; /* 水平居中 */
        transform: translate(-50%, -50%); /* 将元素水平垂直居中 */
    }
    .inner-msg {
        width: 190px;
        color: #262626;
        font-weight: 600;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .title-content {
        position: relative;
        top: -10px;
        font-size: 16px;
        color: #3875ff;
    }
    .circle-line {
        height: 12px;
        border-left: 1px dashed #d9d9d9;
        position: absolute;
        top: -17px;
        left: 50%;
        transform: translate(-50%);
    }

    .no-img {
        width: 66px;
        height: 80px;
        background-image: url('http://10.40.0.33:9001/file-storage/482099304502618112-source.png');
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .soltion-body {
        position: relative;
        margin-bottom: 12px;
        min-height: 20px;
    }
    .richtext-container p {
        margin: 0 !important;
        text-align: left !important;
    }
    .richtext-container span {
        text-align: left !important;
    }
    .previewable-image {
        cursor: pointer !important;
    }
    .mgtp16 {
        margin-top: 16px;
    }
    .mg16 {
        margin-bottom: 16px;
    }
    /*样式*/
    :deep(.ant3-dropdow-memu-item:hover) {
        background: #f5f5f5 !important;
    }
</style>
